import { reactive } from 'vue';
import { clone } from 'ramda';
import { predefineThemeVars } from './custom-theme-model';

/**
 * 自定义主题控制器
 * @author zzq
 * @date 2024-05-09 14:18:14
 * @export
 * @class CustomThemeController
 */
export class CustomThemeController {
  /**
   * 自定义主题状态
   *
   * @type {IData}
   * @memberof CustomThemeController
   */
  public state: IData = {};

  /**
   * 自定义配置模型
   *
   * @type {IData[]}
   * @memberof CustomThemeController
   */
  public model: IData[] = [];

  /**
   * 预定义类型
   *
   * @type {IData}
   * @memberof CustomThemeController
   */
  public predefineType: IData[] = [
    {
      codeName: 'light',
      label: '亮色',
      labelLang: 'light',
      color: '#557da5',
    },
    // {
    //   codeName: 'dark',
    //   label: '暗色',
    //   color: '#1c1c1c',
    // },
  ];

  /**
   * 获取css变量
   *
   * @param {string} name
   * @return {*}  {string}
   * @memberof CustomThemeController
   */
  public getCssVar(name: string, defaultVar?: string): string | number {
    let result: string | number = defaultVar || name;
    if (this.state.themeVars && this.state.themeVars[name]) {
      result = this.state.themeVars[name];
    } else {
      const styles = window.getComputedStyle(document.documentElement);
      if (styles) {
        result = styles.getPropertyValue(defaultVar || name) || result;
      }
    }
    if (result.toString().endsWith('px')) {
      result = Number(result.toString().slice(0, -2));
    }
    if (
      result.toString().includes(',') &&
      !result.toString().startsWith('rgb')
    ) {
      result = `rgba(${result}, 1)`;
    }
    return result;
  }

  /**
   * 计算尺寸改变，同类size批量更改
   *
   * @param {string} varName
   * @param {number} size
   * @memberof CustomThemeController
   */
  public calcSizeChange(varName: string, size: number, item: IData): void {
    this.state.themeVars[varName] = `${size}${item.unit || ''}`;
    if (item.kindVars) {
      Object.keys(item.kindVars).forEach((key: string) => {
        const value = item.kindVars[key];
        this.state.themeVars[key] = `${size + value}${item.unit || ''}`;
      });
    }
  }

  constructor() {
    this.model = predefineThemeVars;
    const customTheme = ibiz.util.theme.getCustomTheme();
    this.state = clone(customTheme);
    this.state = reactive(this.state);
  }
}
